<script setup lang="ts">
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useClipboard } from '@vueuse/core';
import { Button, message, Result } from 'ant-design-vue';

import { AuthApi } from '#/api/core/auth';

const params = ref<AuthApi.LoginParams>({});

const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      params.value = modalApi.getData();
    }
  },
});
const clipboardText = computed(() => {
  return `用户名: ${params.value.username}\n密码: ${params.value.password}`;
});
const { copy } = useClipboard({ legacy: true });

async function copyMessage() {
  await copy(clipboardText.value);
  message.info('已复制到剪切板！');
}
</script>

<template>
  <Modal title="密码重置">
    <Result status="success" title="密码重置成功！" :sub-title="clipboardText">
      <template #extra>
        <Button type="primary" size="large" @click="copyMessage()"> 点击复制 </Button>
      </template>
    </Result>
  </Modal>
</template>
